<template>
  <div class="app-container">
    <!-- 添加或修改OA 自定义流程表单对话框 -->
    <el-dialog :title="formName" v-model="showFormDialog" width="500px" append-to-body @close="cancel">
      <iframe ref="formCreate" :src="url"
        :style="`width: 100%; max-height: 60vh; height: ${offsetHeight}px; border: none;`" />
    </el-dialog>
  </div>
</template>

<script setup>
  import {
    ref,
    onMounted,
    onBeforeUnmount,
    defineProps,
  } from 'vue';
  import {
    getToken
  } from "@/utils/auth";
  import {
    ElMessage,
    ElMessageBox
  } from 'element-plus';

  // 定义组件属性
  const props = defineProps({
    type: {
      type: String,
      default: "0"
    },
    value: {
      type: String,
      default: ""
    },
    taskId: {
      type: String,
      default: ""
    },
    disabled: {
      type: Boolean,
      default: false
    },
    visible: {
      type: Boolean,
      default: true
    },
    formName: {
      type: String,
      default: "办理"
    },
    formId: {
      type: String,
      default: ""
    }
  });

  // 定义发射事件
  const emit = defineEmits(['close', 'submit', 'refresh', 'update:visible']);

  // 响应式变量
  const url = ref("");
  const offsetHeight = ref(null);
  const showFormDialog = ref(props.visible);
  const formCreate = ref(null);
  // 用于验证消息来源的安全域名
  const allowedOrigins = [
    import.meta.env.VITE_APP_BASE_API,
    // 可以添加其他允许的域名
  ];

  onMounted(() => {
    // 初始化URL时添加必要参数
    url.value = `${import.meta.env.VITE_APP_BASE_API}/warm-flow-ui/index.html?` +
      new URLSearchParams({
        type: 'formCreate',
        formId: props.formId,
        taskId: props.taskId,
        Authorization: `Bearer ${getToken()}`
      });

    window.addEventListener("message", handleMessage);
  });

  onBeforeUnmount(() => {
    window.removeEventListener("message", handleMessage);
  });

  // 处理来自iframe的消息
  const handleMessage = (event) => {
    // 1. 验证消息来源的安全性
    const isAllowed = allowedOrigins.some(origin =>
      event.origin.startsWith(origin.replace(/\/$/, ''))
    );
    if (!isAllowed) {
      console.warn('拒绝来自未授权域名的消息:', event.origin);
      return;
    }

    // 2. 验证消息数据格式
    if (!event.data || typeof event.data !== 'object') {
      console.error('无效的消息格式，期望对象类型:', event.data);
      return;
    }

    try {
      // 3. 对可能包含JSON字符串的数据进行安全解析
      const messageData = typeof event.data.data === 'string' ?
        JSON.parse(event.data.data) :
        event.data.data;

      switch (event.data.method) {
        case "formInit":
          const initData = {
            type: props.type,
            formId: props.formId,
            taskId: props.taskId,
            disabled: props.disabled
          };
          sendMessageToIframe("formInit", initData);
          break;

        case "getOffsetHeight":
          if (typeof messageData === 'number') {
            offsetHeight.value = messageData;
          } else {
            console.error('无效的高度值:', messageData);
          }
          break;

        case "submitSuccess":
          ElMessage.success("办理成功");
          cancel();
          break;

          // 可以添加其他消息类型的处理
        default:
          console.log('收到未知消息类型:', event.data.method);
      }
    } catch (error) {
      // 4. 捕获并处理JSON解析错误
      ElMessageBox.error({
        title: '数据处理错误',
        message: `解析数据时发生错误: ${error.message}`,
        appendToBody: true
      });
      console.error('消息处理错误:', error, '原始消息:', event.data);
    }
  };

  // 向iframe发送消息的封装方法
  const sendMessageToIframe = (method, data) => {
    if (formCreate.value?.contentWindow) {
      try {
        // 确保发送的数据是可序列化的
        const message = {
          method,
          data: JSON.parse(JSON.stringify(data))
        };
        formCreate.value.contentWindow.postMessage(message, import.meta.env.VITE_APP_BASE_API);
      } catch (error) {
        console.error('发送消息到iframe失败:', error);
      }
    }
  };

  // 取消按钮
  const cancel = () => {
    showFormDialog.value = false;
    emit("update:visible", false);
    sendMessageToIframe("reset");
    emit('refresh');
  };
</script>